<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

let charts = ref()  // 获取 组件实例

onMounted(() => {
    // 初始化echarts
    let mycharts = echarts.init(charts.value)

    let areaData = [
        {
            name: '吃饭',
            max: 100,
            value: 10,
        },
        {
            name: '购物',
            max: 100,
            value: 28,
        },
        {
            name: '交通费',
            max: 100,
            value: 12,
        },
        {
            name: '住宿费',
            max: 100,
            value: 20,
        },
        {
            name: '景区门票费',
            max: 100,
            value: 14,
        },
        {
            name: '游玩费',
            max: 100,
            value: 16,
        },
    ];
    let data = [];
    areaData.forEach((item) => {
        data.push(item.value);
    });
    let maxNum = Math.max(...data); //获取数组中最大的值
    // 向上取整十，整百，整千，整万的方法
    function ceilNumber(number) {
        let bite = 0;
        if (number < 10) {
            return 10;
        }
        while (number >= 10) {
            number /= 10;
            bite += 1;
        }
        return Math.ceil(number) * Math.pow(10, bite);
    }
    let allMax = ceilNumber(maxNum); //将最大的值进行向上取整
    areaData.forEach((item) => {
        item.max = allMax;
        // item.max = 30;
    });
    let data1 = [0, 0, 0, 0, 0, 0];
    let data2 = [0, 0, 0, 0, 0, 0];
    let data3 = [0, 0, 0, 0, 0, 0];
    let data4 = [0, 0, 0, 0, 0, 0];
    let data5 = [0, 0, 0, 0, 0, 0];
    let data6 = [0, 0, 0, 0, 0, 0];
    data1[0] = data[0];
    data2[1] = data[1];
    data3[2] = data[2];
    data4[3] = data[3];
    data5[4] = data[4];
    data6[5] = data[5];
    let option = {
        // backgroundColor: '#092A4E',
        color: ['#2E64FF', '#F0D418', '#FF9B42', '#FF6B6B', '#8E42FF', '#00e4ff'],
        legend: {
            trigger: 'item',
            orient: 'vertical',
            // orient: 'horizontal',
            top: 'center',
            left: 0,
            textStyle: {
                color: '#fff',
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.name + ': ' + params.value + '%';
            },
        },
        radar: {  // 雷达图相关配置
            zlevel: 11,  // 设置雷达图层级
            shape: 'circle',  // 设置雷达图类型 有circle和polygon可选
            // shape: 'polygon',
            scale: true,  // 设置是否脱离 0 值比例
            indicator: areaData,  // 设置数据
            center: ['50%', '50%'],  // 设置雷达图位置
            radius: '50%',  // 设置雷达图大小
            // nameGap: '-10',  // 设置指示器名称和指示器轴的距离。
            startAngle: 90,
            axisName: {
                show: false,  // 设置指示器的显示与否
                color: 'white',
            },
            axisLine: {  // 设置坐标线样式
                show: true,
                lineStyle: {
                    // color: 'rgba(32,126,255, .5)',
                    color: 'Cyan',
                },
            },
            splitLine: {  // 设置圆圈线样式
                lineStyle: {
                    color: 'rgba(132,196,125, 0.8)',
                },
            },
            splitArea: {  // 设置圆圈背景颜色
                areaStyle: {
                    color: 'rgba(32,126,255, 0.1)',
                    // color: 'red',
                },
            },
        },
        polar: {
            radius: '40%',
        },
        angleAxis: {
            zlevel: 0,
            min: 0,
            max: 360,
            // axisLabel: {
                
            // },
            splitLine: {
                show: false,
            },
        },
        // x轴,y轴 配置
        xAxis:{},
        yAxis:{},
        axisLabel:{
            show: false,
            textStyle: {
                color: 'rgba(29,208,240,.5)',
                // color: 'red',
            },
        },
        radiusAxis: {
            // zlevel: 0,
            // min: 0,
            // max: allMax,
            // axisLabel: {
                
            // },
            splitLine: {
                // show: true,
            },
        },
        series: [
            {
                type: 'radar',
                symbolSize: 12,
                symbol: 'circle',
                tooltip: {
                    trigger: 'none',
                },
                itemStyle: {
                    label: {
                        show: true,
                        formatter: function (params) {
                            if (params.value !== 0) {
                                return params.value + '%';
                            } else {
                                return '';
                            }
                        },
                        color: '#ffffff',
                        fontSize: 12,
                        distance: 0,
                    },
                },
                areaStyle: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(32,126,255, 0.5)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(32,126,255, 0.1)', // 100% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
                data: [
                    {
                        value: data,
                    },
                    {
                        value: data1,
                        itemStyle: {
                            color: '#2e64ff',
                        },
                        lineStyle: {
                            color: 'transparent', //设置折线的颜色
                        },
                    },
                    {
                        value: data2,
                        itemStyle: {
                            color: '#f0d418',
                        },
                        lineStyle: {
                            color: 'transparent', //设置折线的颜色
                        },
                    },
                    {
                        value: data3,
                        itemStyle: {
                            color: '#ff9b42',
                        },
                        lineStyle: {
                            color: 'transparent', //设置折线的颜色
                        },
                    },
                    {
                        value: data4,
                        itemStyle: {
                            color: '#ff6b6b',
                        },
                        lineStyle: {
                            color: 'transparent', //设置折线的颜色
                        },
                    },
                    {
                        value: data5,
                        itemStyle: {
                            color: '#8e42ff',
                        },
                        lineStyle: {
                            color: 'transparent', //设置折线的颜色
                        },
                    },
                    {
                        value: data6,
                        itemStyle: {
                            color: '#00e4ff',
                        },
                        lineStyle: {
                            color: 'transparent', //设置折线的颜色
                        },
                    },
                    {
                        value: [0, 0, 0, 0, 0, 0],
                        // name: '违章占比',
                        symbolSize: 13,
                        itemStyle: {
                            color: 'rgba(40, 97, 132)',
                        },
                    },
                ],
                zlevel: 20,
                z: 4,
            },
            {
                type: 'pie',
                startAngle: 90,
                clockwise: false, //逆时针
                data: areaData.map((item) => {
                    return {
                        name: item.name,
                        value: item.value,
                    };
                }),
                // radius: ['45%', '60%'],
                radius: ['65%', '90%'],  // 饼状图大小
                zlevel: -1,
                label: {
                    formatter: '{d}%',
                    position: 'inside',
                    fontSize: '20',
                    color: '#fff',
                },
            },
        ],
    };


    mycharts.setOption(option)
})
</script>

<template>
    <div class="box8">
        <div class="title">
            <p>年度数据统计</p>
            <img src="/public/img/screen/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<style scoped lang="scss">
.box8 {
    width: 100%;
    height: 100%;
    // background-color: red;
    background: url('/public/img/screen/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    color: rgb(74, 243, 243);
    font-size: 16px;

    .title {}

    .charts {
        width: 100%;
        height: 260px;
    }
}
</style>